// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//  KAREL
//      .loadMap(int id) - loads from database
//      .saveMap(int id) - saves map to database
//      .toggleWall(point, direction) - adds or removes wall between two points
//      .zoomIn()
//      .zoomOut()
//      .placeKarel()
//      .placeBeeper()
//
// $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

function object(o) { function F() {} F.prototype = o; return new F(); }

KAREL = {
  editor : {
    init : function(view, statusbar) {
      this._status = this._initStatusBar(jQuery(statusbar));
      this._view = jQuery(view);
      this._field = this._initSVG(this._view);
      this._initField(this._field);
      this._draggable(true);
      this.prep();

      this._status.append(" done.");
      return this;
    },
    loadMap : function(id) {
      jQuery.getJSON("./loadmap/" + id,
              function(data) {
                jQuery.each(data, _loadItem);
              });
    },
    prep : function() {
      this._field.drawWalls();
//      _drawBeepers();
//      _drawRobot();
    },

    saveMap : function() {

    },
    zoomIn : function() {
      this.zoom += 1;
    },
    zoomOut : function() {
      this.zoom -= 1;
    },
    placeKarel : function() {

    },
    placeBeeper : function() {

    },

    robot : {
      init : function(data) {
        this._location = data.location;
        this._direction = data.direction;
      },
      turnLeft : function() {
        switch (this._direction) {
          case "north":
            this._direction = "west";
            break;
          case "west":
            this._direction = "south";
            break;
          case "south":
            this._direction = "east";
            break;
          case "east":
            this._direction = "north";
            break;
        }
      },
      turnRight : function() {
        switch (this._direction) {
          case "north":
            this._direction = "east";
            break;
          case "east":
            this._direction = "south";
            break;
          case "south":
            this._direction = "west";
            break;
          case "west":
            this._direction = "north";
            break;
        }
      },

      _direction : "",
      _location : {}
    },
    
    _stWalls : [],
    _aveWalls : [],
    _beepers : [],

    _initStatusBar : function(container) {
      return  $('<p>Initializing...</p>').appendTo(container);
    },
    _initSVG : function(view) {
      view.svg();
      canvas = svgManager.getSVGFor(view);
      return canvas;
    },
    _initField : function(field) {
      var view = jQuery(field._svg.parentNode);

      field.x = 0;
      field.y = 0;
      field.zoom = 0;

      field.circle(null, 75, 75, 50, {fill: 'none', stroke: 'red', stroke_width: 3})

      field.moveBy = function(dx, dy) {
        var x = this._svg.viewBox.baseVal.x - dx;
        var y = this._svg.viewBox.baseVal.y - dy;
        this.configure({"viewBox": [x,y,view.width(),view.height()].join(" ")});
      }
      field.drawWalls = function() {
        var size = this.wallSize();
        console.log(size, this.x);
        var dim = Math.max(view.width(), view.height());
        for( x = -dim;
             x < 2*dim;
             x += size ) {
          this.line(null, x, -dim, x, 2*dim, {stroke: 'gray', stroke_width: 1});
          this.line(null, -dim, x, 2*dim, x, {stroke: 'gray', stroke_width: 1});
        }
      }
      field.wallSize = function() {
        return (this.zoom + 5) * 10;
      }
      return field;
    },
    _draggable : function(enable) {
      if(enable) {
        var field = this._field;
        var view = this._view;
        this._startDrag = function(e) {
          if(!e.ctrlKey) return;
          e.preventDefault();
          view.css("cursor", "url(./img/closedhand.cur), default");
          view.mousepos = { x: e.clientX, y: e.clientY };
          $(window).mousemove(function(f) {
            dx = f.clientX - view.mousepos.x;
            dy = f.clientY - view.mousepos.y;
            view.mousepos = { x: f.clientX, y: f.clientY };
            field.moveBy(dx, dy);
          })
        }
        this._endDrag = function() {
          view.css("cursor", "default");
          $(window).unbind("mousemove");
        }
        view.mousedown(this._startDrag);
        $(window).mouseup(this._endDrag);
      } else {
        view.unbind("mousedown", this._startDrag);
        view.unbind("mouseup", this._endDrag);
      }
    },
    _loadItem : function(item) {
      switch (item.type) {
        case "wall":
          this._walls.push(item.data)
          break;
        case "beeper":
          this._beepers.push(item.data)
          break;
        case "karel":
          this._robot.place(item.data)
          break;
      }
    }
  }
}